$(function () {
  let colors = ['#0df1de', '#2fe6fc', '#6291f2', '#2861d6', '#0a29be', '#400dc0', '#791c97', '#d0630a', '#f2ec3b', '#25c379']

  // 左侧
  function myChart4_1() {
    var myChart = echarts.init(document.getElementById('chart4-1'));
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#57617B'
          }
        }
      },
      legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        data: ['今年预测', '去年同期',],
        right: '4%',
        textStyle: {
          fontSize: 12,
          color: '#ccc'
        }
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: '3%',
        top: "10%",
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        min: 0,
        axisLine: {
          lineStyle: {
            color: '#DDD'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255,255,255,.1)'
          }
        },
        data: ['8-22', '8-23', '8-24', '8-25', '8-26', '8-27', '8-28']
      }],
      yAxis: [{
        type: 'value',
        max: 400,
        interval: 50,
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#DDD'
          }
        },
        axisLabel: {
          margin: 5,
          textStyle: {
            fontSize: 14
          }
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255,255,255,.1)'
          }
        }
      }],
      series: [{
        name: '今年预测',
        type: 'line',
        symbol: 'none',
        smooth: true,
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(13,241,222,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(13,241,222,0)'
            }, {
              offset: 1,
              color: 'rgba(13,241,222,0)'
            }], false),
          }
        },
        itemStyle: {
          color: "#407FFF"
        },

        data: [230, 270, 320, 340, 330, 300, 310]
      }, {
        name: '去年同期',
        type: 'line',
        smooth: true,
        symbol: 'none',
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(208,99,10,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(208,99,10,0)'
            }, {
              offset: 1,
              color: 'rgba(208,99,10,0)'
            }], false),
          },
        },
        itemStyle: {
          color: "rgba(208,99,10,0.6)"
        },

        data: [300, 320, 370, 350, 360, 330, 340]
      }]
    };

    myChart.setOption(option);

  }

  // 中间
  function myChart4_7() {
    var myChart = echarts.init(document.getElementById('chart4-7'));
    var chinaGeoCoordMap = {
      '黑龙江': [127.9688, 45.368],
      '内蒙古': [110.3467, 41.4899],
      "吉林": [125.8154, 44.2584],
      '北京市': [116.4551, 40.2539],
      "辽宁": [123.1238, 42.1216],
      "河北": [114.4995, 38.1006],
      "天津": [117.4219, 39.4189],
      "山西": [112.3352, 37.9413],
      "陕西": [109.1162, 34.2004],
      "甘肃": [103.5901, 36.3043],
      "宁夏": [106.3586, 38.1775],
      "青海": [101.4038, 36.8207],
      "新疆": [87.9236, 43.5883],
      "西藏": [91.11, 29.97],
      "四川": [103.9526, 30.7617],
      "重庆": [108.384366, 30.439702],
      "山东": [117.1582, 36.8701],
      "河南": [113.4668, 34.6234],
      "江苏": [118.8062, 31.9208],
      "安徽": [117.29, 32.0581],
      "湖北": [114.3896, 30.6628],
      "浙江": [119.5313, 29.8773],
      "福建": [119.4543, 25.9222],
      "江西": [116.0046, 28.6633],
      "湖南": [113.0823, 28.2568],
      "贵州": [106.6992, 26.7682],
      "云南": [102.9199, 25.4663],
      "广东": [113.12244, 23.009505],
      "广西": [108.479, 23.1152],
      "海南": [110.3893, 19.8516],
      '上海': [121.4648, 31.2891]
    };
    var chinaDatas = [
      [{
        name: '黑龙江',
        value: 0
      }], [{
        name: '内蒙古',
        value: 0
      }], [{
        name: '吉林',
        value: 0
      }], [{
        name: '辽宁',
        value: 0
      }], [{
        name: '河北',
        value: 0
      }], [{
        name: '天津',
        value: 0
      }], [{
        name: '山西',
        value: 0
      }], [{
        name: '陕西',
        value: 0
      }], [{
        name: '甘肃',
        value: 0
      }], [{
        name: '宁夏',
        value: 0
      }], [{
        name: '青海',
        value: 0
      }], [{
        name: '新疆',
        value: 0
      }], [{
        name: '西藏',
        value: 0
      }], [{
        name: '四川',
        value: 0
      }], [{
        name: '重庆',
        value: 0
      }], [{
        name: '山东',
        value: 0
      }], [{
        name: '河南',
        value: 0
      }], [{
        name: '江苏',
        value: 0
      }], [{
        name: '安徽',
        value: 0
      }], [{
        name: '湖北',
        value: 0
      }], [{
        name: '浙江',
        value: 0
      }], [{
        name: '福建',
        value: 0
      }], [{
        name: '江西',
        value: 0
      }], [{
        name: '湖南',
        value: 0
      }], [{
        name: '贵州',
        value: 0
      }], [{
        name: '广西',
        value: 0
      }], [{
        name: '海南',
        value: 0
      }], [{
        name: '上海',
        value: 1
      }]
    ];

    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = chinaGeoCoordMap[dataItem[0].name];
        var toCoord = [113.4668, 34.6234];
        if (fromCoord && toCoord) {
          res.push([{
            coord: fromCoord,
            value: dataItem[0].value
          }, {
            coord: toCoord,
          }]);
        }
      }
      return res;
    };
    var series = [];
    [['河南', chinaDatas]].forEach(function (item, i) {
      console.log(item)
      series.push({
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 5, //图标大小
            },
            lineStyle: {
              normal: {
                width: 1, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: .3, //尾迹线条曲直度
                color: '#FFF000'
              }
            },
            data: convertData(item[1])
          }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: { //涟漪特效
              period: 4, //动画时间，值越小速度越快
              brushType: 'stroke', //波纹绘制方式 stroke, fill
              scale: 4 //波纹圆环最大限制，值越大波纹越大
            },
            label: {
              normal: {
                show: false,
                position: 'right', //显示位置
                offset: [5, 0], //偏移设置
                formatter: function (params) {//圆环显示文字
                  return params.data.name;
                },
                fontSize: 10
              },
              emphasis: {
                show: true
              }
            },
            symbol: 'circle',
            symbolSize: function (val) {
              return 5 + val[2] * 5; //圆环大小
            },
            itemStyle: {
              normal: {
                show: false,
                color: '#fff',
                fontSize: 10
              }
            },
            data: item[1].map(function (dataItem) {
              return {
                name: dataItem[0].name,
                value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
              };
            }),
          },
          //被攻击点
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              period: 4,
              brushType: 'stroke',
              scale: 4
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                //offset:[5, 0],
                color: '#fff',
                formatter: '{b}',
                textStyle: {
                  color: "#E15D68",
                  fontWeight: 700
                }
              },
              emphasis: {
                show: true,
                color: "#f60"
              }
            },
            symbol: 'pin',
            symbolSize: 20,
            color:"#2fe2fa",
            data: [{
              name: item[0],
              value: chinaGeoCoordMap[item[0]].concat([10]),
            }],
          }
      );
    });

    option = {

      geo: {
        map: 'china',
        zoom: 1.2,
        label: {
          emphasis: {
            show: false
          }
        },
        roam: true, //是否允许缩放
        itemStyle: {
          normal: {
            areaColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#0489F0' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#28D8E8' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }, //地图背景色
            borderColor: '#516a89', //省市边界线00fcff 516a89
            borderWidth: 1
          },
          emphasis: {
            color: 'rgba(4, 137, 240,1)' //悬浮背景
          }
        },

      },
      series: series
    };

    myChart.setOption(option);

  }

  function myChart4_8() {
    var myChart = echarts.init(document.getElementById('chart4-8'));
    var myColor = ['#118DF0', '#118DF0', '#118DF0', '#118DF0', '#118DF0'];
    var myColor2 = ['#00FFFF', '#00FFFF', '#00FFFF', '#00FFFF', '#00FFFF'];
    var datas11 = [34, 41, 52, 69, 72];
    var datas21 = [20, 22, 24, 29, 30];

    function getsum(arr) {
      return arr.reduce(function (prev, curr, idx, arr) {
        return prev + curr;
      });
    }

    var sumarr = datas11.concat(datas21);
    var sum = getsum(sumarr);
    console.log(sum);
    option = {
      grid: [{
        width: "30%",
        left: '15%',
        top: '5%',
        right: '0',
        bottom: '5%'
      },
        {
          width: "30%",
          left: '70%',
          top: '5%',
          right: '0',
          bottom: '5%'
        }
      ],
      xAxis: [{
        gridIndex: 0,
        show: false,
      }, {
        gridIndex: 1,
        show: false,
      }],
      yAxis: [{
        gridIndex: 0,
        splitLine: 'none',
        axisTick: 'none',
        axisLine: 'none',
        axisLabel: {
          align: 'left',
          padding: [0, 0, 0, -40],
          textStyle: {
            color: '#fff',
            fontSize: '90%',
            rich: {
              a: {
                fontSize: 12,
                backgroundColor: '#E15D68',
                borderRadius: 10,
                padding: [2, 5],
                textAlign: 'center',
                color: '#fff',

              },
              b: {
                fontSize: 12,
                backgroundColor: '#FFAA25',
                borderRadius: 10,
                padding: [2, 5],
                textAlign: 'center',
                color: '#fff',
              },
              c: {
                fontSize: 12,
                backgroundColor: '#14C6CA',
                borderRadius: 10,
                padding: [2, 5],
                textAlign: 'center',
                color: '#fff',
              },
              d: {
                fontSize: 12,
                textAlign: 'center',
                padding: [2, 4],
                color: '#14C6CA',
              }
            }
          },
          formatter: function (params) {
            var data = ['河南', '陕西', '山西', '湖南', '湖北']
            for (var i = 0; i < 5; i++) {
              if (data[i] == params) {
                var j = i + 1
                if (i == 0) {
                  return '{a|' + j + '} ' + params
                }
                if (i == 1) {
                  return '{b|' + j + '} ' + params

                }
                if (i == 2) {
                  return '{c|' + j + '} ' + params
                }
                if (i > 2) {
                  return '{d| ' + j + '}' + params
                }
              }

            }
          },
        },

        data: ['湖北', '湖南', '山西', '陕西', '河南']
      }, {
        gridIndex: 0,
        splitLine: 'none',
        axisTick: 'none',
        axisLine: 'none',
        data: []
      },
        {
          gridIndex: 1,
          splitLine: 'none',
          axisTick: 'none',
          axisLine: 'none',
          axisLabel: {
            align: 'left',
            padding: [0, 0, 0, -50],
            textStyle: {
              color: '#fff',
              fontSize: '90%',
              rich: {
                a: {
                  fontSize: 12,
                  width: 15,
                  textAlign: 'center',
                  color: '#14C6CA',

                }
              },
            },

            formatter: function (params) {
              var data = ['河北', '江苏', '山东', '安徽', '江西'];
              for (var i = 0; i < 5; i++) {
                if (data[i] == params) {
                  var k = i + 6
                  return '{a|' + k + '} ' + params
                }
              }
            },
          },
          data: ['江西', '安徽', '山东', '江苏', '河北']
        }, {
          gridIndex: 1,
          splitLine: 'none',
          axisTick: 'none',
          axisLine: 'none',
          data: []
        }
      ],
      series: [{
        name: '值',
        type: 'bar',
        xAxisIndex: 0,
        yAxisIndex: 0,
        data: datas11,
        label: {
          normal: {
            show: true,
            position: ['20%', '0'],
            offset: [0, 0],
            color: '#fff',
            fontSize: '12px',
            formatter: function (item) {
              return item.value + '万' + '\xa0\xa0 ' + (item.value / sum * 100).toFixed(2) + '%'
            }
          }
        },
        barWidth: '50%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgb(40,97,214)'
            },
              {
                offset: 1,
                color: 'rgb(47,230,252)'
              }
            ], false),
            barBorderRadius: 50,
          }
        },
        z: 2
      },


        {
          name: '值',
          type: 'bar',
          xAxisIndex: 1,
          yAxisIndex: 3,
          data: datas21,
          label: {
            normal: {
              show: true,
              position: ['20%', '0'],
              color: '#fff',
              fontSize: '12px',
              formatter: function (item) {
                return item.value + '万' + '\xa0\xa0' + (item.value / sum * 100).toFixed(2) + '%'
              }
            }
          },
          barWidth: '50%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: 'rgb(40,97,214)'
              },
                {
                  offset: 1,
                  color: 'rgb(47,230,252)'
                }
              ], false),
              barBorderRadius: 50,
            }
          },
          z: 2
        },


      ]
    };
    myChart.setOption(option);

  }

  // 右侧
  function myChart4_2() {
    var myChart = echarts.init(document.getElementById('chart4-2'));
    var option = {
      tooltip: {
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '2%',
        right: '4%',
        bottom: '13%',
        top: '5%',
        containLabel: true
      },
      legend: {
        data: ['本周', '上周'],
        bottom: '0',
        x: 'center',
        textStyle: {
          color: "#fff"
        },
        itemWidth: 12,
        itemHeight: 10,
        // itemGap: 35
      },
      xAxis: {
        type: 'category',
        data: ['8-22', '8-23', '8-24', '8-25', '8-26', '8-27', '8-28'],
        axisLine: {
          lineStyle: {
            color: '#fff'

          }
        },
        axisLabel: {
          margin: 8,
          textStyle: {
            fontFamily: 'Microsoft YaHei',
            color: "#fff",
            fontSize: 12,
          }
        },
        axisTick: {
          show: false
        }
      },

      yAxis: {
        type: 'value',
        interval: 50,
        max: 400,
        axisLine: {
          show: true,
          lineStyle: {
            color: 'white'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.2)'
          }
        },
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        axisTick: {
          show: false
        }
      },
      series: [{
        name: '本周',
        type: 'bar',
        barWidth: '12',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(47,230,252)'
            },
              {
                offset: 1,
                color: 'rgb(40,97,214)'
              }]),
          },
        },
        data: [260, 300, 350, 270, 340, 330, 210]
      },
        {
          name: '上周',
          type: 'bar',
          barWidth: '12',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgb(98,145,242)'
              },
                {
                  offset: 1,
                  color: 'rgb(10,41,190)'
                }]),
            }

          },
          data: [230, 260, 310, 260, 280, 370, 270]
        }]
    };
    myChart.setOption(option);
  }

  function myChart4_3_1() {
    var myChart = echarts.init(document.getElementById('chart4-3-1'));
    option = {

      grid: {
        left: '20%',
        top: '20%',
        right: '0%',
        botom: '0%'
      },
      tooltip: {
        show: true
      },
      "grid": {
        "borderWidth": 0,
        "top": 100,
        "bottom": 85,
        textStyle: {
          color: "#f00"
        }
      },
      title: {
        text: '性别占比',
        textStyle: {
          color: '#14C6CA',
          fontSize: 12
        },
        x: 'left',
        top: 0
      },
      "calculable": true,
      xAxis: {
        show: true,
        type: 'category',
        axisLine: {
          show: false,
          lineStyle: {
            color: "#619bc1",
            width: 1,
            type: "solid"
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: "#fff",
          fontSize: 12,
        },
        data: ['男生', '女生']
      },
      yAxis: [{
        show: false,
        type: 'value'
      }

      ],

      "series": [{
        "name": "男生",
        "type": "bar",
        "stack": "总量",
        "barMaxWidth": 20,
        "barGap": "10%",
        "itemStyle": {
          "normal": {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color:  'rgb(47,230,252)'
          },
          {
              offset: 1,
              color:'rgb(40,97,214)'
          }
          ], false),
            "label": {
              "show": true,
              "textStyle": {
                "color": "#fff"
              },
              "position": "top",
              formatter: function (p) {
                return p.value > 0 ? (p.value) + '%' : '';
              }

            }
          }
        },
        "data": [42, 0],
      },
        {
          "name": "女生",
          "type": "bar",
          "stack": "总量",
          "barMaxWidth": 20,
          "barGap": "10%",
          "itemStyle": {
            "normal": {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgb(98,145,242)'
            },
            {
                offset: 1,
                color: 'rgb(10,41,190)'
            }
            ], false),
              "label": {
                "show": true,
                "textStyle": {
                  "color": "#fff"
                },
                "position": "top",
                formatter: function (p) {
                  return p.value > 0 ? (p.value) + '%' : '';
                }
              }
            }
          },
          "data": [
            0, 58

          ],
        }

      ]

    }
    myChart.setOption(option);

  }

  function myChart4_3_2() {
    var myChart = echarts.init(document.getElementById('chart4-3-2'));
    var chartName = ['18岁以下', '18-25岁', '26-35岁', '36-45岁', '46-55岁', '55岁以上'];
    var chartData = ['10', '20', '30', '15', '15', '10']
    var data = []
    var legendName = []
    for (var i = 0; i < chartData.length; i++) {
      var c = {
        value: chartData[i],
        name: chartName[i]
      }
      data[i] = c;
      legendName[i] = chartName[i];
    }
    option = {
      tooltip: {
        show: true,
        formatter: "{b} : {c}%"
      },
      title: {
        text: '年龄分部',
        textStyle: {
          color: '#14C6CA',
          fontSize: 12
        },
        x: 'left',
        top: 0
      },
      legend: {
        orient: 'vertical',
        x: '60%',
        y: 'center',
        itemWidth: 10,
        itemHeight: 8,
        align: 'left',
        textStyle: {
          fontSize: 10,
          color: '#fff'
        },
        itemGap: 2,
        data: legendName
      },
      series: [{
        type: 'pie',
        radius: ['0%', '55%'],
        center: ['30%', '55%'],
        color: colors,
        data: data,
        labelLine: {
          normal: {
            show: false,
            length: 20,
            length2: 20,
            lineStyle: {
              color: '#12EABE',
              width: 2
            }
          }
        },
        label: {
          normal: {
            show: false,
            formatter: '{c|{c}}\n{hr|}\n{d|{d}%}',
            rich: {
              b: {
                fontSize: 20,
                color: '#12EABE',
                align: 'left',
                padding: 4
              },
              hr: {
                borderColor: '#12EABE',
                width: '100%',
                borderWidth: 2,
                height: 0
              },
              d: {
                fontSize: 20,
                color: '#fff',
                align: 'left',
                padding: 4
              },
              c: {
                fontSize: 20,
                color: '#fff',
                align: 'left',
                padding: 4
              }
            }
          }
        }
      }]
    };
    myChart.setOption(option);

  }

  function myChart4_4_1() {
    var myChart = echarts.init(document.getElementById('chart4-4-1'));
    var labels = ['美食', '娱乐', '购物', '体验', '风光', '历史'];
    option = {
      title: {
        text: '游客偏好',
        textStyle: {
          color: '#14C6CA',
          fontSize: 12
        },
        x: 'left',
        top: 0
      },
      tooltip: {
        formatter: function (params) {
          var results = '';
          for (var i = 0; i < labels.length; i++) {
            results += labels[i] + '：' + params.value[i] + '%<br>';
          }
          return results;
        }
      },
      radar: {
        radius: '50%',
        name: {
          textStyle: {
            color: '#fff',
            fontSize: 10
          }
        },
        nameGap: '2',
        splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
          show: true,
          areaStyle: { // 分隔区域的样式设置。
            color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
          }
        },
        axisLine: { //指向外圈文本的分隔线样式
          lineStyle: {
            color: '#666666'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#666666', // 分隔线颜色
            width: 1, // 分隔线线宽
          }
        },
        indicator: [{name: '美食', max: 30},
          {name: '娱乐', max: 30},
          {name: '购物', max: 30},
          {name: '体验', max: 30},
          {name: '风光', max: 30},
          {name: '历史', max: 30}]
      },
      series: [{
        type: 'radar',
        data: [{
          value: [5, 20, 25, 22, 15, 15],
        },],
        symbolSize: 0,
        lineStyle: {
          normal: {
            color: 'rgba(255,255,255,0)',
            width: 1
          }
        },
        areaStyle: {
          normal: {
            color: 'rgba(20,198,202,0.8)',
          },
        },
      }],
    };
    myChart.setOption(option);

  }

  function myChart4_4_2() {
    var myChart = echarts.init(document.getElementById('chart4-4-2'));
    var chartName = ['火车', '飞机', '大巴', '自驾'];
    var chartData = ['10', '20', '30', '15']
    var data = []
    var legendName = []
    for (var i = 0; i < chartData.length; i++) {
      var c = {
        value: chartData[i],
        name: chartName[i]
      }
      data[i] = c;
      legendName[i] = chartName[i];
    }
    option = {
      tooltip: {
        show: true,
        formatter: "{b} : {c}%"
      },
      title: {
        text: '交通出行方式',
        textStyle: {
          color: '#14C6CA',
          fontSize: 12
        },
        x: 'left',
        top: 0
      },
      legend: {
        orient: 'vertical',
        x: '70%',
        y: 'center',
        itemWidth: 10,
        itemHeight: 8,
        align: 'left',
        textStyle: {
          fontSize: 10,
          color: '#fff'
        },
        itemGap: 2,
        data: legendName
      },
      series: [{
        type: 'pie',
        radius: ['30%', '55%'],
        center: ['30%', '55%'],
        color: colors,
        data: data,
        labelLine: {
          normal: {
            show: false,
            length: 20,
            length2: 20,
            lineStyle: {
              color: '#12EABE',
              width: 2
            }
          }
        },
        label: {
          normal: {
            show: false,
            formatter: '{c|{c}}\n{hr|}\n{d|{d}%}',
            rich: {
              b: {
                fontSize: 20,
                color: '#12EABE',
                align: 'left',
                padding: 4
              },
              hr: {
                borderColor: '#12EABE',
                width: '100%',
                borderWidth: 2,
                height: 0
              },
              d: {
                fontSize: 20,
                color: '#fff',
                align: 'left',
                padding: 4
              },
              c: {
                fontSize: 20,
                color: '#fff',
                align: 'left',
                padding: 4
              }
            }
          }
        }
      }]
    };
    myChart.setOption(option);

  }

  myChart4_1()
  myChart4_7()
  myChart4_8()
  myChart4_2()
  myChart4_3_1()
  myChart4_3_2()
  myChart4_4_1()
  myChart4_4_2()


  // 游客量
  $('.change-box li').click(function () {
    $(this).addClass('active').siblings('li').removeClass('active')
    let index = $(this).index()
    $('.visitor-number-chart').children().eq(index).removeClass('chart-hd').siblings().addClass('chart-hd')
  })
  // 客源
  $('.customers-box a').click(function () {
    $(this).addClass('active').siblings('a').removeClass('active')
    let index = $(this).index()
    $('.customers-box-chart').children().eq(index).removeClass('chart-hd').siblings().addClass('chart-hd')
  })
  // 红黑榜
  $('.brand-reputation-box a').click(function () {
    $(this).addClass('active').siblings('a').removeClass('active')
    let index = $(this).index()
    $('.brand-reputatio-chart').children().eq(index).removeClass('chart-hd').siblings().addClass('chart-hd')
  })

  // 下拉框
  // 对所有下拉款进行初始化

  $(".sheng").M_select({
    // 手动添加下拉款图片（以html页面为起始位置写路径）
    "Img": "../../plugin/M_select/js/M_select/up4.png",
    "Img2": "../../plugin/M_select/js/M_select/down4.png",
    "radius": "4px",
    "Title": "选择省份",
    "inputName": "selected_value",
    // 默认选中的值（参数值写需要选中的select的value值）
    "selected": "03",
    Succee: function () {
      site = $('#select-sheng').val()
      console.log(site)
    }
  });
  $(".shi").M_select({
    // 手动添加下拉款图片（以html页面为起始位置写路径）
    "Img": "../../plugin/M_select/js/M_select/up4.png",
    "Img2": "../../plugin/M_select/js/M_select/down4.png",
    "radius": "4px",
    "Title": "选择城市",
    "inputName": "selected_value",
    // 默认选中的值（参数值写需要选中的select的value值）
    "selected": "03",
    Succee: function () {
      site = $('#select-shi').val()
      console.log(site)
    }
  });

})
